<template>
  <div class="input-section" v-if="!outline.trim()">
    <div class="input-content">
      <el-input
        class="input-input"
        type="textarea"
        resize="none"
        :autosize="{ minRows: 1, maxRows: 4 }"
        maxlength="500"
        placeholder="请输入PPT主题与要求（Enter = 提交，Shift+Enter = 换行）"
        v-model="message"
        @keydown.enter="handleKeyCode($event)"
      />
      <div
        class="btn"
        :class="message.trim() ? '' : 'disable'"
        @click="handleSend"
      >
        <el-icon>
          <component is="Promotion" />
        </el-icon>
      </div>
    </div>
    <div class="padding-top-30 padding-lr-10 line-height-2xl">
      <pre style="color: var(--el-text-color-primary)">
      参考格式：
      1、运营工作总结
      2、平凡的世界读书分享，要求：大约15页左右，多一些心得体会
      </pre>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, type Ref, onMounted, defineEmits } from 'vue'
const message: Ref<string> = ref('')
const outline: Ref<string> = ref('')
import { pptFileContentKey, pptFileIdKey, pptOutlineKey, pptThemeInputKey } from '../ppt-helpers'

const emit = defineEmits(['onSend'])

onMounted(() => {
  const messageValue = window.sessionStorage.getItem(pptThemeInputKey.value)
  if (messageValue) {
    message.value = messageValue
  }
})

const handleKeyCode = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    if (!e.shiftKey && !e.isComposing) {
      e.preventDefault()
      handleSend()
    }
  }
}
const handleSend = () => {
  if (message.value.trim()) {
    window.sessionStorage.setItem(pptThemeInputKey.value, message.value)
    window.sessionStorage.removeItem(pptOutlineKey.value)
    window.sessionStorage.removeItem(pptFileContentKey.value)
    window.sessionStorage.removeItem(pptFileIdKey.value)
    emit('onSend')
  }
}
</script>
<style scoped lang="scss">
.input-section {
  width: calc(100% - 80px);
  max-width: 1000px;
  box-shadow: var(--el-box-shadow);
  //   margin: 100px auto 0;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 15px;

  @include scrollBar;

  .input-content {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: var(--el-border);
    background: #fff;
    padding: 10px 10px 10px 0;
    border-radius: 6px;
    border-width: 2px;

    &:deep(.el-textarea__inner) {
      box-shadow: none;
    }

    .btn {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 4px;
      color: var(--el-text-color-secondary);
      font-size: 40px;

      &.disable {
        cursor: no-drop;
        opacity: 0.6;
      }
    }
  }

  .markdown-content {
    max-height: calc(100vh - 280px);
    overflow: auto;
    min-width: 300px;
  }

  .markdown-footer {
    display: flex;
    padding: 20px 0 10px;
    justify-content: space-between;
    align-items: center;
  }

  .title-input {
    width: 700px;

    &.page_title {
      :deep(.el-input__wrapper .el-input__inner) {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        height: 30px;
      }
    }

    &.page_sub_title {
      :deep(.el-input__wrapper .el-input__inner) {
        font-size: 14px;
        color: #666666;
        height: 26px;
      }
    }

    :deep(.el-input__wrapper) {
      box-shadow: none;
      background: transparent;

      .el-input__inner {
        font-size: 26px;
        color: #101010;
        font-weight: bold;
        height: 40px;
      }

      &:hover {
        box-shadow: 0 0 0 1px var(--el-border-color) inset;
        background: #fff;
      }

      &:has(.el-input__inner:focus) {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
        background: #fff;
      }
    }
  }

  .line-time {
    position: absolute;
    left: -130px;
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .el-timeline-item {
    padding-bottom: 10px;

    :deep(.el-timeline-item__content) {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      position: relative;
      top: 3px;
    }

    .icons {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      color: #676767;
      width: 100px;
      padding-right: 20px;

      .el-icon {
        cursor: pointer;
      }
    }

    &:hover {
      .icons {
        opacity: 1;
      }
    }
  }
}
</style>
